import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../../res/myColors.dart';

/// 图片预览组件：上下滚动，每张图占屏幕 80% 高度、95% 宽度，居中显示
class ImageListView extends StatelessWidget {
  final List<String> imageUrls;

  const ImageListView({super.key, required this.imageUrls});

  @override
  Widget build(BuildContext context) {
    // 获取屏幕宽高
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      backgroundColor: myColors.c_B5B5B5,
      body: Stack(
        children: [
          // 垂直滚动的列表，每张图一个 item
          ListView.builder(
            itemCount: imageUrls.length,
            itemBuilder: (context, index) {
              return Center(
                child: Container(
                  width: screenWidth * 0.98,  // 宽度占屏幕 95%
                  height: screenHeight * 0.98, // 高度占屏幕 80%
                  margin: const EdgeInsets.symmetric(vertical: 20),
                  decoration: BoxDecoration(
                    color: Colors.black,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(12),
                    child: Image.network(
                      imageUrls[index],
                      fit: BoxFit.cover,
                      loadingBuilder: (ctx, child, progress) {
                        if (progress == null) return child;
                        return const Center(child: CircularProgressIndicator());
                      },
                      errorBuilder: (ctx, error, stackTrace) {
                        return const Center(
                          child: Text('加载失败', style: TextStyle(color: Colors.white)),
                        );
                      },
                    ),
                  ),
                ),
              );
            },
          ),

          // 右上角关闭按钮
          Positioned(
            top: 40,
            right: 20,
            child: GestureDetector(
              onTap: () => Navigator.of(context).pop(),
              child: const Icon(Icons.close, color: Colors.white, size: 30),
            ),
          ),
        ],
      ),
    );
  }
}
